<template>
  <div class="Home">
    <swiper :list="banners" :show-dots="false" :show-desc-mask="false" :auto="true" :loop="true" :interval="3000" :aspect-ratio="825/1450" />
    <div class="img"></div>
    <div class="nav">
      <ul>
        <li>
          <img src="/static/img/h_b1.png" @click="onNavTo('datetime')" alt="b1">
        </li>
        <li>
          <img src="/static/img/h_b2.png" @click="onNavTo('teams')" alt="b2">
        </li>
        <li>
          <img src="/static/img/h_b3.png" @click="onNavTo('judges')" alt="b3">
        </li>
        <li>
          <img src="/static/img/h_b4.png" @click="onNavTo('live')" alt="b4">
        </li>
        <li>
          <img src="/static/img/h_b5.png" @click="onNavTo('comment')" alt="b5">
        </li>
        <li>
          <img src="/static/img/h_b6.png" @click="onNavTo('intro')" alt="b6">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Swiper } from "vux"

let banners = [
  {  
    img: '/static/img/banner/1.jpg',
  },
  {
    img: '/static/img/banner/2.jpg',
  },
  {  
    img: '/static/img/banner/3.jpg',
  },
  {
    img: '/static/img/banner/4.jpg',
  },
  {  
    img: '/static/img/banner/5.jpg',
  },
  {
    img: '/static/img/banner/6.jpg',
  },
];


export default {
  name: 'Home',
  data () {
    return {
      banners,

    }
  },
  methods: {
    onNavTo(a) {
      if (a === 'live') {
        alert('live');
        return
      }
      this.$router.push(a);
    }
  },
  components: {
    Swiper
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/scss/common.scss";

.Home {
  @include bg('/static/img/h_bg.png');
  .img {
    @include img('/static/img/h_img.png', 94.42%, 47.5%, center, 20%, center, contain);
  }
  .nav {
    position: absolute;
    width: 100%;
    top: 61%;
    padding: 0 30px;
    box-sizing: border-box;
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.33%;
        text-align: center;
        img {
          width: 70%;
        }
      }
    }
  }
}
</style>
